<template>
  <div>
    <p>flex布局</p>
    <div class="container">
      <div
        v-for="(item,index) in this.cells"
        :key="index"
      >{{item}}</div>
    </div>
    <div class="container1">
      <div
        v-for="(item,index) in this.cells"
        :key="index"
      >{{item}}</div>
    </div>
    <div class="container2">
      <div
        v-for="(item,index) in this.cells"
        :key="index"
      >{{item}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'flex',
  data () {
    return {
      cells: 10
    }
  },
  mounted () {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center; 
  height: 100px;
  background-color: red;
}
</style>

